<template>
  <view class="goods_item">
    <image :src='getMedieUrl(item.image)' class="goods_item_image">			
		<slot></slot>
	</image>
    <view class="goods_item_text_content">
      <view class="goods_item_name">
        <text class="goods_item_name_text">{{ item.goodsName }}</text>
      </view>
      <view class="goods_item_name">
        <text class="goods_item_name_price">￥{{ item.price }}</text>
      </view>
      <view class="box_check">
        <switch :checked="item.show==1" color="#4CD964" style="transform:scale(0.7)" @change="changeSwitch"/>
        <view class="check_tans_view" @click="clickChangeState"></view>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  name: "goods-list",
  props: {
    item: {
      type: Object,
      default() {
        return {
          goodsName: '',
          price: "",
          image: "",
          show: 0,
        }
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    changeSwitch() {
      console.log("===z changeSwitch执行")
    },
    clickChangeState() {
      console.log("===z clickChangeState执行")
    },
    getMedieUrl(url) {
      if (!url) {
        return require('@/static/images/lodding-err.png');
      } else {
        return 'https://' + 'live-mall-1319905095.cos.ap-singapore.myqcloud.com' + '/' + url; //OSS 缩略图规则
      }
    },

  },
}
</script>

<style lang="scss" scoped>
.goods_item {
  display: flex;
  flex-direction: row;
  width: 670rpx;
  margin-top: 20rpx;
  border: 2rpx solid #E1E8E8;
  align-items: center;
  padding: 20rpx;
  // box-sizing: border-box; //盒子不会被撑开
  border-radius: 26rpx;

  //左边图片
  .goods_item_image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 20rpx;
    background-color: #eeeeee;
  }

  //右边内容
  .goods_item_text_content {
    display: flex;
    flex-direction: column;
    margin-left: 32rpx;
    margin-top: 4rpx;
    padding-top: 6rpx;
    width: 436rpx;
    // box-sizing: border-box; //盒子不会被撑开

    //选框
    .box_check {
      width: 456rpx;
      // background-color: green;
      display: flex;
      // display: flex;
      position: relative;
      align-items: flex-end;

      .check_tans_view {
        position: absolute;
        width: 100rpx;
        height: 60rpx;
        background-color: rgba(255, 0, 0, 0);
        opacity: 0.1; //设置0.0全透明iOS具有事件穿透 且不能屏蔽
        z-index: 10;
        // pointer-events: auto; /* 不能穿透 */
      }
    }

    .goods_item_name {


      .goods_item_name_text {
        font-size: 28rpx;
        color: #1B1D29;
        /* 设置两行省略 */
        text-overflow: ellipsis;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: flex; //特别显示模式
        // -webkit-line-clamp: 2; //行数
        // line-clamp: 2;
        // -webkit-box-orient: vertical; //盒子中内容竖直排列
        lines: 2;
        /* 设置两行省略 */

      }

      .goods_item_name_price {
        font-size: 28rpx;
        color: #1B1D29;
        font-weight: bold;
        padding-top: 10rpx;
      }

    }

  }


}

</style>